<template>
  <div class="talent-introduce">
    <!-- 头部 -->
    <div class="header-box">
      <mt-header fixed>
        <!-- 返回按钮 -->
        <!-- <router-link to="/" slot="left">
          <mt-button @click="backHome" class="back-butt" icon="back"></mt-button>
        </router-link>-->
        <!-- 导航图标 -->
        <mt-button class="iconfont icon-ellipsis-vertical" slot="right"></mt-button>
      </mt-header>
      <div class="tab-btn">
        <mt-button :class="[externalborder,external]" @click.native="externalMethods">外部引荐</mt-button>
        <mt-button :class="[insideborder,inside]" @click.native="insideMethods">内部竞聘</mt-button>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="talent-body">
      <!-- 导航区域 -->
      <div class="nav-box">
        <span :class="[recom, active]" @click="recomIt">推荐</span>
        <span :class="active1" @click="newIt">最新</span>
      </div>
      <!-- 岗位列表区域 -->
      <div class="position-detail" v-for="(items,index) in list" :key="index" @click="navegita()">
        <span class="pos">{{items.recruitment.name}}</span>
        <span class="money">{{items.recruitment.fSalary+'-'+items.recruitment.eSalary+'k'}}</span>
        <div class="xugong">{{items.company}}</div>
        <div class="tag">
          <div class="address">{{items.recruitment.address}}</div>
          <div class="time">{{items.recruitment.jobTime+'年'}}</div>
          <div class="edu">{{items.recruitment.edu===1?'大专':'本科'}}</div>
        </div>
        <div class="part">
          <img slot="icon" src="../../assets/talentPicture/touxiang.png" />
          <span class="caicai">{{items.name+'.'+items.deptname}}</span>
        </div>
      </div>
    </div>
    <!-- 尾部  -->
    <div class="home-footer">
      <mt-tabbar fixed v-model="selectedTab">
        <mt-tab-item id="Home">
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon icontianchongxing-"></div>
          <!-- <img slot="icon" src="@/assets/homePicture/home1.png"  v-if="this.selected == 'Home'"/> -->
          首页
        </mt-tab-item>
        <mt-tab-item id="StudyCenter">
          <!-- <img slot="icon" src="@/assets/homePicture/home2.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconwenti-shuben"></div>学习
        </mt-tab-item>
        <mt-tab-item id="Growup">
          <!-- <img slot="icon" src="@/assets/homePicture/home3.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconxinfeng2"></div>成长
        </mt-tab-item>
        <mt-tab-item id="Things">
          <!-- <img slot="icon" src="@/assets/homePicture/home4.png" /> -->
          <div slot="icon" class="iconfont home-tab-icon iconrili"></div>办事
        </mt-tab-item>
        <mt-tab-item id="TalentIntroduce">
          <div slot="icon" class="iconfont home-tab-icon iconweibiaoti--"></div>优才
        </mt-tab-item>
      </mt-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      recom: "recom",
      // neww:'new',
      active: "strong",
      active1: "",
      externalborder: "externalborder",
      external: "external",
      insideborder: "insideborder",
      inside: "inside",
      params: {
        kind: 0,
        page: 1,
        recommended: 1,
        pageSize: 1
      },
      // 当前尾部选择的是 优才
      selected: 1,
      list: [], // 循环的列表
      flag: false // 用来判断recommended
    };
  },
  watch: {
    selectedTab(before, after) {
      this.$router.push({ path: before });
    }
  },
  methods: {
    externalMethods() {
      this.params.kind = 0;
      this.external = "external";
      this.inside = "inside";
      // console.log(this.inside)
    },
    insideMethods() {
      this.params.kind = 1;
      this.inside = "external";
      this.external = "inside";
      // console.log(this.inside)
    },
    recomIt() {
      this.$set(this.params, "recommended", 1);
      this.active = "strong";
      this.active1 = "";
    },
    newIt() {
      this.$delete(this.params, "recommended");
      this.active1 = "strong";
      this.active = "";
    },
    //列表数据
    async getRecruitmentList() {
      const { data: res } = await this.$http.post(
        "/recruitment/qryRecruitmentList",
        this.params
      );
      console.log(res);
      this.list = res.data;
      res.data.forEach(item => {
        this.$set(item, "company", "徐工挖机");
      });
    },
    // 跳转到详情页 根据招聘种类去判断跳转到哪个详情页
    navegita() {
      if (this.params.kind == 1) {
        this.$router.push("/outsideDetail");
      } else {
        this.$router.push("/insideDetail");
      }
    }
  },
  created() {
    this.getRecruitmentList();
  }
};
</script>

<style lang="less" scoped>
@import url("~@/pagecss/talent-introduce.less");
</style>